<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析--><!---->
    <title>危废</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <link href="../static/leshu/css/leshu.css" th:href="@{/leshu/css/leshu.css}" rel="stylesheet"/>
</head>

<body class="gray-bg ">
<div class="wrapper wrapper-content animated fadeInRight main_h_100">
    <div>
        <div class="col-sm-6 ">
            <div class="ibox float-e-margins ">
                <div class="ibox-title">
                    <h5>危废产量（不包含医废）</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-question"
                               onclick="$.modal.alert('统计暂存点当日产量（重量、袋数）、暂存点总产量（重量、袋数）、当前暂存点产量（重量、袋数）、日暂存点产量（重量、袋数）')"></i>
                        </a>
                    </div>

                    <div class="ibox-tools hide">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content ">
                    <div class="echarts" id="echarts-gauge-chart"></div>
                </div>
            </div>
        </div>


        <div class="col-sm-6 ">
            <div class="ibox float-e-margins ">
                <div class="ibox-title">
                    <h5>科室危废占比（不包含医废）</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-question" onclick="$.modal.alert('统计科室累计产量、暂存量(KG)、统计当日科室产量、暂存量(KG)')"></i>
                        </a>
                    </div>
                    <div class="ibox-tools hide">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content ">
                    <div class="echarts" id="echarts-pie-chart"></div>
                </div>
            </div>
        </div>

    </div>

    <div class="row ">
        <div class="col-sm-6 ">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>近一周危废采集趋势图（不包含医废）</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-question" onclick="$.modal.alert('统计一周采集员采集危废收集量的趋势（袋）')"></i>
                        </a>
                    </div>
                    <div class="ibox-tools hide">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-line-chart"></div>
                </div>
            </div>
        </div>


        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>危废类别日暂存、产量统计（不包含医废）</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-question" onclick="$.modal.alert('统计医院内每天危废类型暂存点的库存量、生产量（KG）')"></i>
                        </a>
                    </div>
                    <div class="ibox-tools hide">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
    </div>


</div>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var prefix = ctx + "wf/manager";
    //   获取 数据接口
    let color = ['#0E7CE2', '#FF8352', '#F8456B', '#E271DE', '#0fdded', '#4AEAB0', '#918cae'];

    var deptId = sessionStorage.getItem("hospital_ids");
    //Todo 进入当前页面弹出提示 不能为所有选项

    $(function () {
        //当日、累计科室医废 产量、暂存量
        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        $.post(prefix + '/echarets/dept_trash_sum_staging', {deptId: deptId}, function (res) {
//            console.log("累计科室医废 产量、暂存量", res);
            if (res.code == 0) {
                // console.log(res.rows)
                pieChart.setOption(pieoption2(res.rows));
                $(window).resize(pieChart.resize);

            } else
                $.modal.msgError(res.msg);
        });

        //饼状图 未使用
        function pieoption(pieoptionData) {
            return {
                color: color,
                title: {
                    show: false,
                    text: '当日医废类型产量占比',
                    // subtext: "2019/12",
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c}kg ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: pieoptionData.map(x => {
                        return x.name
                    }),
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 12
                            },
                            value: {
                                fontSize: 14,
                                padding: [0, 5, 0, 15]
                            },
                            unit: {
                                fontSize: 12
                            }
                        }
                    },
                    formatter: function (name) {
                        let res = pieoptionData.filter(v => v.name === name);
                        res = res[0] || {};
                        let unit = res.unit || 'Kg';
                        return '{name|' + name + '}{value|' + res.value + '}{unit|' + unit + '}'
                    },
                },
                calculable: true,
                series: [
                    {
//                        name: 's',
                        type: 'pie',
                        radius: '70%',
                        center: ['70%', '60%'],
                        data: pieoptionData
                    }
                ]
            };
        };


        //双环 饼状图
        function pieoption2(pieoptionData) {
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    type: "scroll",
                    top: 0,
                    left: 10,
                    height: 170,
                    data: pieoptionData.map(x => {
                        return x.name
                    }),
                },
                series: [
                    {
                        name: '当日',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '65%'],
                        tooltip: {
                            trigger: 'item',
//                            formatter: '{a} <br/>{b}产量: {c} ({d}%) <br/>{b}暂存: {c} '
                            formatter: function (name) {
                                return name.seriesName + '<br/>' + name.data.name + '产量：' + name.data.value + 'kg (' + name.percent + '%)<br/>'
                                    + name.data.name + '暂存：' + name.data.d4 + 'kg'
                            }
                        },
                        label: {
                            show: false,
//                            position: 'inner',
                        },
                        labelLine: {
                            show: false
                        },
                        data: pieoptionData.map(x => {//科室名称
                            return {name: x.name, value: x.d3, d4: x.d4}
                        }),
                    },
                    {
                        name: '累计',
                        type: 'pie',
                        radius: ['75%', '90%'],
                        tooltip: {
                            trigger: 'item',
//                            formatter: '{a} <br/>{b}: {c} ({d}-)'
                            formatter: function (name) {
                                return name.seriesName + '<br/>' + name.data.name + '产量：' + name.data.value + 'kg (' + name.percent + '%)<br/>'
                                    + name.data.name + '暂存：' + name.data.d2 + 'kg'
                            }
                        },
                        label: {
                            show: false,
                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            // shadowBlur:3,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            // shadowColor: '#999',
                            // padding: [0, 7],
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                // abg: {
                                //     backgroundColor: '#333',
                                //     width: '100%',
                                //     align: 'right',
                                //     height: 22,
                                //     borderRadius: [4, 4, 0, 0]
                                // },
                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        },
                        data: pieoptionData.map(x => {
                            return {name: x.name, value: x.d1, d2: x.d2}
                        }),
                    }
                ]
            }
        }


        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
        //获取收集员一周的产量
        $.post(prefix + '/echarets/gathering_week_of_statistics', {deptId: deptId}, function (res) {
//            console.log('获取收集员一周的产量', res);
            if (res.code == 0) {
                var lineoptions = lineoption(res.rows);
//                console.log('lineoption:', lineoptions)
                lineChart.setOption(lineoptions);
                $(window).resize(lineChart.resize);
            } else
                $.modal.msgError(res.msg);
        });

        //折线图 一周内的折线图
        function dateList(day) {
            var list = [], i = 0;
            while (i < day) {
                var date = new Date();
                date.setDate(date.getDate() - (day - 1 - i))
                list[i] = date.getMonth() + 1 + '-' + date.getDate()
                i++;
            }
            return list
        }

        function lineoption(lineoptionData) {
            var nameList = lineoptionData.map(x => {
                return x.name
            });
            return {
                title: {
                    show: false,
                    text: '近一周采集趋势图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: nameList
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        magicType: {show: true, type: ['line', 'bar']},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: dateList(7)
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            formatter: '{value} 袋'
                        }
                    }
                ],
                series:
                    lineoptionData.map(x => {
                        return {
                            name: x.name,
                            type: 'line',
                            data: [x.i7, x.i6, x.i5, x.i4, x.i3, x.i2, x.i1]
                        }
                    })
            };
        }

        //柱状图
        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));

        //获取当日医废产量占比
        $.post(prefix + '/echarets/now_day_trash_type_sum_staging', {deptId: deptId}, function (res) {
            if (res.code == 0) {
//                console.log("获取当日医废产量占比", res);
                barChart.setOption(baroption(res.rows));
                $(window).resize(barChart.resize);
            } else
                $.modal.msgError(res.msg);
        });
        function baroption(baroptionData) {
            return {
                title: {
                    show: false,
                    text: '医废类型日暂存、产量统计'
                },
                color: ['#5793f3', '#d14a61', '#675bba'],
                tooltip: {
//                    formatter:'{a} </br> {b1}: {c1}kg'
                },
                toolbox: {
                    feature: {
                        // dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        saveAsImage: {show: true}
                        // restore: {show: true},
                    }
                },
                legend: {
                    data: ['暂存', '产生量']
                },
                grid: {
                    x: 50,
                    x2: 10,
                    y2: 24
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: baroptionData.map(x => {
                            return x.name
                        }),
                    }
                ],
                yAxis: [
                    {
                        position: 'left',
                        left: '50%',
                        name: '产量',
                        axisLabel: {
                            formatter: '{value} Kg'
                        },
                        trigger: 'axis',
                        minInterval: 10,
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '暂存',
                        type: 'bar',
                        data: baroptionData.map(x => {
                            return x.d2
                        }),
//                        markPoint: {
//                            data: [
//                                // {type: 'max', name: '最大值'},
//                                // {type: 'min', name: '最小值'}
//                            ]
//                        },
//                        markLine: {
//                            data: [
//                                {type: 'average', name: '平均值'}
//                            ]
//                        }
                    },
                    {
                        name: '产生量',
                        type: 'bar',
                        data: baroptionData.map(x => {
                            return x.d1
                        }),
                        markPoint: {
                            data: [
                                // {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18},
                                // {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                            ]
                        },
//                        markLine: {
//                            data: [
//                                {type: 'average', name: '平均值'}
//                            ]
//                        }
                    }
                ]
            };
        }


        //仪表板图
        var gaugeChart = echarts.init(document.getElementById("echarts-gauge-chart"));
        $.post(prefix + '/echarets/hospital_bag_and_weight', {deptId: deptId}, function (res) {
            if (res.code == 200) {
                console.log("累计、日、待入库数量统计", res.data);
                gaugeChart.setOption(gaugeoption(res.data));
                $(window).resize(gaugeChart.resize);
            } else
                $.modal.msgError(res.msg);
        });

//        var ins = "1230";
//        var unit = ins.substring(0,1)+1;
//        console.log(unit * ins.length)
        function gaugeoption(gaugeoptionData) {
            return {
                title: {
                    show: false,
                    text: '累计、日、待入库数量统计',
                    x: 'left'
                },
                tooltip: {
                    formatter: "{a}：{c}袋"
                },
                toolbox: {
                    show: true,
                    feature: {
//                        mark: {show: true},
//                        restore: {show: true},
//                        saveAsImage: {show: true}
                    }
                },
                series: [
                    {
                        name: '医废总量',
                        type: 'gauge',
                        radius: '100%',
                        min: 0,
                        max: gaugeoptionData.l1 * 2,
                        center: ['50%', '50%'],    // 默认全局居中
//                        splitNumber: 10,
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 10
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 15,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 20,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        title: {
                            offsetCenter: [0, '-20%'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 15,
                                fontStyle: 'italic'
                            }
                        },
                        axisLabel: {
                            formatter: function (v) {
//                                switch (v + '') {
//                                    case '0' :
//                                        return '0';
//                                    case v * 2 :
//                                        return gaugeoptionData.l1*2;
//                                }
                            }
                        },
                        detail: {
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder'
                            }
                        },
                        data: [{value: gaugeoptionData.l1, name: '累计总产量', d1: gaugeoptionData.d1}],
                        tooltip: {
                            formatter: function (name) {
                                return name.data.name + '</br> 产量：' + name.data.value + '袋 </br> 产量：' + name.data.d1 + 'Kg'
                            }
                        }
                    },
                    {
                        name: '日产量',
                        type: 'gauge',
                        center: ['20%', '55%'],    // 默认全局居中
                        radius: '90%',
                        min: 0,
                        endAngle: 50,
//                        splitNumber: 0,
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 8
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 20,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 5
                        },
                        title: {
                            offsetCenter: [0, '-20%'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 15,
                                fontStyle: 'italic'
                            }
                        },
                        detail: {
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder'
                            }
                        },
                        data: [{value: gaugeoptionData.l4, name: '日产量', d3: gaugeoptionData.d3}],
                        tooltip: {
                            formatter: function (name) {
                                return name.data.name + '</br> 产量：' + name.data.value + '袋 </br> 产量：' + name.data.d3 + 'Kg'
                            }
                        }
                    },
                    {
                        name: '累计暂存',
                        type: 'gauge',
                        center: ['80%', '50%'],    // 默认全局居中
                        radius: '90%',
                        min: 0,
                        max: 100,
                        startAngle: 135,
                        endAngle: 45,
                        splitNumber: 10,
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [
//                                    [0.1, '#228b22'],
                                    [1, '#ff4500']
                                ],
                                width: 8
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 5,
                            length: 10,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {
                            formatter: function (v) {
                                switch (v + '') {
                                    case '0' :
                                        return '0';
                                    case '50' :
                                        return '累计暂存';
                                    case '100' :
                                        return '100';
                                }
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 15,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 5
                        },
                        title: {
                            show: false,
                        },
                        detail: {
                            show: false
                        },
                        data: [{value: gaugeoptionData.l3, name: '累计暂存', d2: gaugeoptionData.d2}],
                        tooltip: {
                            formatter: function (name) {
                                return name.data.name + '</br> 产量：' + name.data.value + '袋 </br> 产量：' + name.data.d2 + 'Kg'
                            }
                        }
                    },
                    {
                        name: '日暂存',
                        type: 'gauge',
                        center: ['80%', '50%'],    // 默认全局居中
                        radius: '70%',
                        min: 0,
                        max: 100,
                        startAngle: 315,
                        endAngle: 225,
                        splitNumber: 10,
                        clockwise: true,
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [
                                    [0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']
                                ],
                                width: 8
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            show: false
                        },
                        axisLabel: {
                            formatter: function (v) {
                                switch (v + '') {
                                    case '100' :
                                        return '100';
                                    case '50' :
                                        return '日暂存';
                                    case '0' :
                                        return '0';
                                }
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 15,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 5
                        },
                        title: {
                            show: false,
                        },
                        detail: {
                            show: false
                        },
                        data: [{value: gaugeoptionData.l5, name: '日暂存', d4: gaugeoptionData.d4}],
                        tooltip: {
                            formatter: function (name) {
                                return name.data.name + '</br> 产量：' + name.data.value + '袋 </br> 产量：' + name.data.d4 + 'Kg'
                            }
                        }
                    }
                ]
            };
        }


    });

</script>
</body>
</html>
